<template>
  <div class="btns">
    <BorderButton
      :class="['ac-btn4', { active: activeNameStack.includes('jk') }]"
      @click="handleClick('jk')"
    >
      监控
    </BorderButton>
    <BorderButton
      :class="['ac-btn4', { active: activeNameStack.includes('yjwz') }]"
      @click="handleClick('yjwz')"
    >
      应急物资
    </BorderButton>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import BorderButton from "./button.vue";
import { UI, Resource, WINDOW_TYPE, COORD_TYPE } from "@/cim";

export default defineComponent({
  name: "ActionBtns",
  components: {
    BorderButton,
  },
  data() {
    return {
      activeNameStack: [],
    };
  },
  mounted() {
    //标签点击回调函数
    // window.AC.LabelClickCallbackFunction["TestFn"] = function (code) {
    //   //此处内容可根据各自业务需求自定义
    //   console.log(code);
    //   const type = code.split("-")[0];
    //   const { origin } = location;
    //   if (type === "S") {
    //     UI.ShowWindow(
    //       WINDOW_TYPE.CENTER_MIDDLE_WINDOW,
    //       origin +
    //         "/controls/video-play/index.html?id=1&videoSrc=https://www.w3schools.com/html/movie.mp4",
    //       { draggbale: true }
    //     );
    //   } else if (type === "X") {
    //     UI.ShowWindow(
    //       WINDOW_TYPE.CENTER_MIN_WINDOW,
    //       origin +
    //         "/controls/sm-detail/index.html?id=1&videoSrc=https://www.w3schools.com/html/movie.mp4",
    //       { draggbale: true }
    //     );
    //   }
    // };
  },
  methods: {
    handleClick(name) {
      const index = this.activeNameStack.findIndex((item) => item === name);

      if (index === -1) {
        this.activeNameStack.push(name);
      } else {
        this.activeNameStack.splice(index, 1);
      }

      const map = this.handleMap(index !== -1);
      map[name] && map[name]();
    },
    // 策略模式处理函数
    handleMap(isClose) {
      return {
        jk: () => {
          console.log("监控点击", isClose);

          let data = [
            [119.09853192222901, 53.74477414694107, -46.19923782348633],
            [119.09894187483677, 53.74457675298633, -46.142303466796875],
            [119.10011861783003, 53.746078272693005, -42.329063415527344],
            [119.10069943345242, 53.7458038684926, -38.888710021972656],
            [119.10177714503806, 53.74647751829796, -39.71664047241211],
            [119.09945363472347, 53.742987465443925, -51.886329650878906],
            [119.10276245461851, 53.74491073312083, -44.506874084472656],
            [119.10307511896228, 53.744357658363896, -27.491836547851562],
            [119.1038331806587, 53.74492574413636, -25.52945327758789],
            [119.10425188972225, 53.74287264027456, -42.712345123291016],
            [119.10555988986158, 53.74446970393942, -41.48863220214844],
            [119.10451659592569, 53.7408441011749, -32.46156311035156],
            [119.10903250833152, 53.74323288773163, -33.347930908203125],
            [119.10505726649598, 53.739631359998874, -52.28925704956055],
            [119.10703704754131, 53.741177226693, -47.34425735473633],
            [119.11111655333828, 53.74427273720759, -36.45132827758789],
            [119.10549749854678, 53.745657523427376, -40.445587158203125],
            [119.1079464674424, 53.74494796227837, -39.031368255615234],
            [119.11223068812484, 53.74638626849271, -32.1345329284668],
            [119.11094656287185, 53.74703038099793, -24.989452362060547],
            [119.1076175057792, 53.74681733793673, -26.818086624145508],
            [119.10713201893542, 53.74926011456658, -31.737110137939453],
            [119.10578244664144, 53.74833725214067, -29.515390396118164],
            [119.10563139911042, 53.747441905927225, -35.729923248291016],
            [119.10358896221803, 53.74828248689884, -34.506290435791016],
            [119.1055238502545, 53.74992025653996, -29.547147750854492],
            [119.11336001143997, 53.7521918005794, -39.5588264465332],
            [119.11808439975819, 53.75226400653853, -33.21273422241211],
            [119.11987656605226, 53.75592266882242, -32.729061126708984],
          ];

          const imgLabel = data.map((item, i) => ({
            lng: parseFloat(item[0]),
            lat: parseFloat(item[1]),
            height: 15,
            labelName: "S-" + i,
            text: "摄像头" + i + 1,
            imageSize: [64, 64],
            textRange: 3000, //文字的可见范围
            textColor: 0xffff9900, //文字颜色
            imageName: "/sxt.png",
            callbackFunction: "window.AC.LabelClickCallbackFunction.TestFn",
          }));

          if (isClose) {
            Resource.DeleteImageLabel(imgLabel.map((item) => item.labelName));
          } else {
            Resource.ShowImageLabel(imgLabel, COORD_TYPE.WGS84);
          }
        },
        yjwz: () => {
          console.log("应急物资点击", isClose);

          let data = [
            [119.09853492222901, 53.74477414694107, -46.19923782348633],
            [119.09894687483677, 53.74457675298633, -46.142303466796875],
            [119.10011761783003, 53.746078272693005, -42.329063415527344],
            [119.10069743345242, 53.7458038684926, -38.888710021972656],
            [119.10177814503806, 53.74647751829796, -39.71664047241211],
            [119.10451259592569, 53.7408441011749, -32.46156311035156],
            [119.10903350833152, 53.74323288773163, -33.347930908203125],
            [119.10505826649598, 53.739631359998874, -52.28925704956055],
            [119.10703404754131, 53.741177226693, -47.34425735473633],
            [119.11111655333828, 53.74427273720759, -36.45132827758789],
            [119.1076175057792, 53.74681733793673, -26.818086624145508],
            [119.10713201893542, 53.74926011456658, -31.737110137939453],
            [119.10578244664144, 53.74833725214067, -29.515390396118164],
            [119.11336001143997, 53.7521918005794, -39.5588264465332],
            [119.11808439975819, 53.75226400653853, -33.21273422241211],
            [119.11987656605226, 53.75592266882242, -32.729061126708984],
          ];

          const imgLabel = data.map((item, i) => ({
            lng: parseFloat(item[0]),
            lat: parseFloat(item[1]),
            height: 15,
            labelName: "X-" + i,
            text: "消防栓" + i + 1,
            imageSize: [64, 64],
            textRange: 3000, //文字的可见范围
            textColor: 0xffff9900, //文字颜色
            imageName: "http://aicim.com:55500/acimages/camera64.png",
            callbackFunction: "window.AC.LabelClickCallbackFunction.TestFn",
          }));

          if (isClose) {
            Resource.DeleteImageLabel(imgLabel.map((item) => item.labelName));
          } else {
            Resource.ShowImageLabel(imgLabel, COORD_TYPE.WGS84);
          }
        },
      };
    },
  },
});
</script>

<style lang="scss" scoped>
.btns {
  position: absolute;
  right: 16px;
  bottom: 16px;

  .ac-btn4 {
    margin-bottom: 8px;
    font-size: 14px;
    font-family: cn;
    text-align: center;
    cursor: pointer;
  }
}
</style>
